<template>
	<view class="booking_page full tab-bar-page">
		<scroll-view scroll-y class="scrollbar-none h-full">
			<van-form @submit="onSubmit">
				<van-cell-group inset class="booking_form">
					<van-field
						name="dateOfVisit"
						label="参观日期"
						input-align="right"
						required
						v-model="form.visitTime"
						:rules="[{ required: true, message: '请选择参观日期' }]"
						error-message-align="right"
					>
						<template #input>
							<DatesAreAvailable
								type="out"
								@choose="chooseDate"
								:dateList="dateList"
								v-model:currentTime="currentTime"
							/>
						</template>
					</van-field>
				</van-cell-group>
				<van-cell-group inset class="booking_form">
					<van-field
						name="numberOfVisitors"
						label="参观人数"
						input-align="right"
					>
						<template #input>
							<view>
								<van-stepper
									v-model="form.numberOfVisitors"
									min="1"
									max="3"
									integer
									@plus="plus"
									@minus="minus"
								/>
								<view class="tips">* 最多可选择3人</view>
							</view>
						</template>
					</van-field>
				</van-cell-group>
				<van-cell-group
					inset
					class="booking_form"
					v-for="index of form.numberOfVisitors"
					:key="index"
				>
					<van-field
						label-width="auto"
						v-model="form.outConnectJson[index - 1].name"
						:name="['outConnectJson', index, 'name']"
						label="预约人姓名"
						placeholder="请输入真实姓名"
						input-align="right"
						required
						:rules="[{ required: true, message: '请输入真实姓名' }]"
						error-message-align="right"
					/>
					<van-field
						label-width="auto"
						v-model="form.outConnectJson[index - 1].phone"
						:name="['outConnectJson', index, 'phone']"
						label="手机号码"
						placeholder="请输入手机号"
						input-align="right"
						required
						:rules="[
							{ required: true, message: '请输入手机号' },
							{ validator: validateMobile, message: '手机号格式错误' },
						]"
						error-message-align="right"
					/>
					<van-field
						label-width="auto"
						v-model="form.outConnectJson[index - 1].idCard"
						:name="['outConnectJson', index, 'idCard']"
						label="身份证号码"
						placeholder="请输入身份证号码"
						input-align="right"
						required
						:rules="[
							{ required: true, message: '请输入身份证号码' },
							{ validator: validateIdCard, message: '身份证格式错误' },
						]"
						error-message-align="right"
					/>
				</van-cell-group>
				<van-cell class="booking_button">
					<van-button
						type="primary"
						size="small"
						class="w-full"
						native-type="submit"
						:loading="submitLoading"
						>提交</van-button
					>
				</van-cell>
			</van-form>
		</scroll-view>
	</view>
</template>
<script setup>
import {
	addOutReservationApi,
	reOutReservationApi,
	getReservationDetailApi,
} from "@/api";
import { validateMobile, validateIdCard } from "@/utils/rules";

// 判断页面性质 reappointment为重新预约 booking为预约
const props = defineProps({
	pageType: {
		type: String,
		default: "booking",
	},
	// id
	id: {
		type: String || Number,
		default: null,
	},
	// 按钮权限
	buttonList: {
		type: String,
		default: null,
	},
});

// 日期选择默认选择
const currentTime = ref(null);

const useDict = useDictStore();
import DatesAreAvailable from "@/components/datesAreAvailable";
// loading
const submitLoading = ref(false);
// 表单
const form = ref({ numberOfVisitors: 1, outConnectJson: [{}] });
// 可选时间段
const dateList = ref([]);

const useTabBar = useTabBarStore();

// 增加
const plus = () => {
	form.value.outConnectJson.push({});
};

//减少
const minus = () => {
	form.value.outConnectJson.splice(form.value.outConnectJson.length - 1, 1);
};

// 日期选择 组件回调
const chooseDate = (res) => {
	form.value.visitDate = res.year + "-" + res.date + " 00:00:00";
	form.value.visitTime = res.timePeriod;
};

// 保存
const onSubmit = async () => {
	if (!props.pageType || props.pageType === "booking") {
		try {
			submitLoading.value = true;
			await addOutReservationApi(form.value);
			feedback.toast("保存成功");
			setTimeout(() => {
				useTabBar.toMine();
			}, 1000);
		} catch (error) {
		} finally {
			submitLoading.value = false;
		}
	} else {
		try {
			submitLoading.value = true;
			await reOutReservationApi(form.value);
			feedback.toast("保存成功");
			setTimeout(() => {
				useTabBar.toMine();
			}, 1000);
		} catch (error) {
		} finally {
			submitLoading.value = false;
		}
	}
};

onShow(() => {
	if (!props.pageType) {
		useTabBar.setTab();
	}
});
onMounted(async () => {
	dateList.value = useDict.getData("OUT_TIME_SLOT");
	if (props.id) {
		form.value.id = props.id;
		const { data: detail } = await getReservationDetailApi({ id: props.id });
		form.value = detail;
		form.value.numberOfVisitors = detail.outConnectJson?.length;
		currentTime.value =
			form.value.visitYear +
			"-" +
			form.value.visitMonth +
			"-" +
			form.value.visitDay +
			"-" +
			form.value.visitTime;
	}
});
</script>
<style lang="scss" scoped>
.booking_ {
	&form {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	&button {
		background-color: $uni-bg-color-grey !important;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}
}
</style>
